/*
 * @Autor: dc
 * @Date: 2022-03-29 16:51:54
 * @LastEditors: dc
 * @LastEditTime: 2022-03-30 11:21:11
 * @Description: 
 */


import React, { Component } from 'react';
// 引入store ,使用redux中存的状态
import store from '../../redux/store' 


class index extends Component {
    state = {count:0}

    // componentDidMount(){
    //     // 监听redux状态更新
    //     store.subscribe(()=>{
    //         this.setState({});
    //     })
    // }

    // 加
    increment=()=>{
        const {value} = this.selectNumber;
        // 通知redux操作
        store.dispatch({
            type:'increment',
            data:value
        })
    }
    // 减
    decrement=()=>{
        const {value} = this.selectNumber;

        // 通知redux操作
        store.dispatch({
            type:'decrement',
            data:value
        })
    }
    // 奇数加
    incrementIfOdd=()=>{
        const {value} = this.selectNumber;
        const count = store.getState();
        if(count % 2 === 0)return
        store.dispatch({
            type:'increment',
            data:value
        })
    }
    // 异步加
    incrementAsync=()=>{
        const {value} = this.selectNumber;
        setTimeout(()=>{
            store.dispatch({
                type:'increment',
                data:value
            })
        },500)
        
    }
    render() {
        return (
            <div>
                <h1>当前和为：{store.getState()}</h1>
                <select ref={c=>this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                <button onClick={this.incrementAsync}>异步加</button>

            </div>
        );
    }
}

export default index;